<template>
  <div class="app-container">
    <el-card>
      <el-card
        class="filter-container"
        shadow="never"
      >
        <div>
          <i class="el-icon-search"></i>
          <span>筛选搜索</span>
          <el-button
            style="float:right"
            type="primary"
            @click="handleSearchList()"
            size="small"
          >
            查询搜索
          </el-button>
          <el-button
            style="float:right;margin-right: 15px"
            @click="handleResetSearch()"
            size="small"
          >
            重置
          </el-button>
        </div>
        <div style="margin-top: 15px">
          <el-form
            :inline="true"
            :model="listQuery"
            size="small"
            label-width="140px"
          >
            <el-form-item label="服务名称：">
              <el-input
                v-model="listQuery.productName"
                class="input-width"
                placeholder="输入名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态：">
              <el-select
                v-model="listQuery.status"
                placeholder="全部"
                clearable
                class="input-width"
              >
                <el-option
                  v-for="(item,index) in typeOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <el-card
        class="operate-container"
        shadow="never"
      >
        <i class="el-icon-tickets"></i>
        <span>数据列表</span>
        <br>
        <br>
        <span>机构名称：<span>{{ this.deptName }}</span></span>
        <el-button
          size="mini"
          class="btn-add"
          @click="handleAdd()"
        >新增机构服务</el-button>
      </el-card>
      <div class="table-container">
        <el-table
          ref="adminTable"
          :data="list"
          style="width: 100%;"
          v-loading="listLoading"
          border
        >
          <el-table-column
            label="Id"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row.id }}</template>
          </el-table-column>
          <el-table-column
            label="服务名称"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row.prodName }}</template>
          </el-table-column>
          <el-table-column
            label="服务方式"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row.serverModeName }}</template>
          </el-table-column>
          <el-table-column
            label="服务场地"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row.siteName }}</template>
          </el-table-column>
          <el-table-column
            label="状态"
            align="center"
          >
            <template slot-scope="scope">{{ status[scope.row.status] }}</template>
          </el-table-column>
          <el-table-column
            label="是否推荐"
            align="center"
          >
            <template slot-scope="scope">
              <el-switch
                @change="handleStatusChange(scope.$index, scope.row)"
                :active-value="1"
                :inactive-value="0"
                v-model="scope.row.isRecommend"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="umsDeptGet(scope.$index, scope.row)"
              >
                查看
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="handleUpdate(scope.$index, scope.row)"
              >
                编辑
              </el-button>
              <el-button
                v-if="scope.row.status!==1"
                size="mini"
                type="text"
                @click="del(scope.$index, scope.row)"
              >
                下架
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :current-page.sync="listQuery.pageNum"
          :page-size="listQuery.pageSize"
          :page-sizes="[10,15,20]"
          :total="total"
          style="margin-bottom: 20px"
        >
        </el-pagination>
      </div>
    </el-card>
    <el-row
      type="flex"
      justify="end"
      style="margin-top: 20px"
    >
      <el-col :span="2">
        <el-button @click="back">返回</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { productList, productChangeStatus } from '@/api/deptInst'
import { deleteRecommend, saveRecommend } from '@/api/content'
const defaultListQuery = {
  pageNum: 1,
  pageSize: 10,
  productName: '',
  channelId: '',
  status: ''
}
export default {
  name: 'AdminList',
  data () {
    return {
      switchvalue: true,
      typeOptions: [
        { value: '', label: '全部' },
        { value: '0', label: '已上架' },
        { value: '1', label: '已下架' },
        { value: '2', label: '草稿' }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      deptName: '',
      listQuery: Object.assign({}, defaultListQuery),
      list: null,
      total: null,
      listLoading: false,
      dialogVisible: false,
      status: {
        0: '已上架',
        1: '已下架',
        2: '草稿',
        3: '配置完成',
        4: '上架待审批',
        5: '打回修改',
        6: '拒绝上架'
      }
    }
  },
  created () {
    this.getList()
    this.deptName = this.$route.query.name
  },
  methods: {
    // 是否推荐
    handleStatusChange (index, row) {
      if (row.isRecommend == 1) {
        const list = { ...row }
        // creatTime 不用传
        // name 就是title
        // sourceId 就是id
        // releaseTime 就是createtime
        // sourceType 是页面中带的
        // channel 也是页面中带的

        const data = {
          channel: '1',
          name: list.prodName,
          image: list.mainPicId || '',
          sourceId: list.id,
          sourceType: '02'
        }
        saveRecommend(data).then((response) => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
        })
      }
      if (row.isRecommend == 0) {
        const params = {
          sourceId: row.id,
          sourceType: '02'
        }
        // console.log(row);
        deleteRecommend(params).then((response) => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
        })
      }
    },
    handleAdd () {
      this.$router.push({
        path: '/dept-ms/updateInst',
        query: {
          deptId: this.$route.query.deptId,
          deptName: this.$route.query.name
        }
      })
    },
    handleResetSearch () {
      this.listQuery = Object.assign({}, defaultListQuery)
    },
    handleSearchList () {
      this.listQuery.pageNum = 1
      this.getList()
    },
    handleSizeChange (val) {
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.listQuery.pageNum = val
      this.getList()
    },
    umsDeptGet (index, row) {
      this.$router.push({
        path: '/dept-ms/deptInstDetails',
        query: {
          prodId: row.id,
          deptId: this.$route.query.deptId,
          deptName: this.$route.query.name
        }
      })
    },
    handleUpdate (index, row) {
      this.$router.push({
        path: '/dept-ms/updateInst',
        query: {
          isEdit: 1,
          prodId: row.id,
          deptId: this.$route.query.deptId,
          deptName: this.$route.query.name
        }
      })
    },
    del (index, row) {
      this.$confirm('是否要确认?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        productChangeStatus({ prodId: row.id, status: '1' }).then(
          (response) => {
            this.$message({
              message: '已下架！',
              type: 'success'
            })
            this.dialogVisible = false
            this.getList()
          }
        )
      })
    },
    getList () {
      this.listQuery.channelId = this.$route.query.deptId
      // this.listQuery.productName = this.$route.query.name
      productList(this.listQuery).then((response) => {
        this.total = response.data.total
        this.list = response.data.list
      })
    },
    back () {
      this.$router.go(-1)
    }
  }
}
</script>
<style>
.el-date-editor .el-range-separator {
  padding: 0 5px;
  /*line-height: 32px;*/
  width: 15%;
  color: #303133;
}
.el-date-editor--daterange.el-input__inner {
  width: 100%;
}
</style>
